<template>
  <div class="lg:gap-6 flex flex-col gap-3">
    <div class="flex justify-between items-center">
      <h2 class="font-bold lg:text-[20px] text-[#09090B] text-[1rem] capitalize">
        {{ $t('pages.hotGame') }}
      </h2>
      <nuxt-link
        :prefetch="false"
        :to="localePath('/game')"
        class="py-2 px-4 bg-[#f7f7f7] rounded-full border flex justify-center items-center cursor-pointer"
      >
        <span class="font-bold text-[12px] text-[#121212] capitalize">
          {{ $t('pages.viewAll') }}
        </span>
      </nuxt-link>
    </div>
    <div class="lg:grid-cols-6 lg:grid lg:gap-5 max-lg:overflow-x-auto max-lg:flex-nowrap max-lg:flex gap-3">
      <nuxt-link
        :prefetch="false"
        :to="`/game/${i.code}`"
        v-for="(i, k) in games"
        :key="k"
        class="max-lg:w-1/3 max-lg:flex-none group lg:col-span-1 flex flex-col gap-2 cursor-pointer"
      >
        <div class="rounded-[16px] aspect-[11/15] overflow-hidden border">
          <img
            class="size-full group-hover:scale-110 object-cover duration-300"
           
            :title="i.title"
            :alt="i.title"
            :src="$globalFn.imgPrefixUrl(i.image || '', 'goods_thumb_3_4')"
          />
        </div>
        <h3 class="font-medium text-[12px] text-[#09090B] line-clamp-2">
          {{ i.title || '' }}
        </h3>
        <div class="font-medium text-[12px] text-[#71717A]">
          {{ i?.region?.name || '' }}
        </div>
      </nuxt-link>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'HotGames',
    props: {
      games: {
        type: Array,
        default: () => []
      }
    }
  }
</script>
